html, body {
	position: relative;
	height: 100%;
}
body {
	background: #eee;
	font-family: YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #000;
	margin: 0;
	padding: 0;
}
a {
	color: #000;
}

.i {
	display: inline-block;
	width: 10px;
	height: 10px;
    margin-right: 5px;
    vertical-align: top;

	&.i1 {
		width: 18px;
	    height: 22px;
		background: url(../images/i1.png) no-repeat center center;
		background-size: 100%;
	}
	&.i2 {
		width: 18px;
	    height: 22px;
		background: url(../images/i2.png) no-repeat center center;
		background-size: 100%;
	}
	&.i3 {
		width: 18px;
	    height: 22px;
		background: url(../images/i3.png) no-repeat center center;
		background-size: 100%;
	}
	&.address {
		width: 18px;
	    height: 22px;
		background: url(../images/address.png) no-repeat center center;
		background-size: 100%;
	}
	&.phone {
		width: 18px;
	    height: 22px;
		background: url(../images/phone.png) no-repeat center center;
		background-size: 100%;
	}
	&.email {
		width: 18px;
	    height: 22px;
		background: url(../images/email.png) no-repeat center center;
		background-size: 100%;
	}
	&.new {
		width: 18px;
	    height: 22px;
		background: url(../images/new.png) no-repeat center center;
		background-size: 100%;
	}
}

.content {
	width: 100%;
}

a.btn, button.btn {
	padding: 20/75rem 40/75rem;
	color: white;
	font-size: 16px;
	background: #00abba;
	border: 0;
    text-align: center;
	border-radius: 1rem;

	&.c1 {
		background: #00abba;
	}

	&.c2 {
		background: #1cb6a9;
	}
}

.menu {
	min-width: 100px;
	width: 70%;
	max-width: 350/75rem;
	padding: 60/75rem;
	background-color: #393735;
	color: #fff;
	z-index: 9999;
	
	.user {
		text-align: center;
		margin-top: 20/75rem;
		img {
			width: 140/75rem;
			height: 140/75rem;
			margin-bottom: 20px;
			border-radius: 100%;
		}
	}

	.buttons {
		margin-top: 85/75rem;
		.btn {
			width: 100%;
			padding-top: 15/75rem;
			padding-bottom: 20/75rem;
			margin-bottom: 20px;
		    display: inline-block;
		    box-sizing: border-box;
		    text-align: center;
		}
	}

	.quit {
		width: 100%;
		background: #393735;
		margin-top: 40/75rem;
		color: #a2a09e;
		border: 1px solid #a2a09e;
		padding-top: 15/75rem;
		padding-bottom: 20/75rem;
		margin-bottom: 20px;
	}

	.alists {
		margin-top: 1rem;
		a {
			display: block;
			height: 100rem/75rem;
			line-height: 100rem/75rem;
			text-align: left;
			color: white;
			&.active {
				color: #3494a3;
			}
		}
	}
}

.dropdown-menu {
	border-bottom: 1px solid #ddd;
	background: #fff;
	height: 100/75rem;
	margin-bottom: 25/75rem;
	select {
		font-size: 16px;
		color: #000;
		margin-top: 24/75rem;
	}
}

.tabs {
	border-bottom: 1px solid #ddd;
	background: #fff;
	height: 100/75rem;
	margin-bottom: 25/75rem;
	.tab {
		display: inline-block;
		width: 50%;
		float: left;
		font-size: 16px;
		line-height: 100/75rem;
		&.active {
			color: #00b3c6;
			border-bottom: 2px solid #00b3c6;
		}
	}
}

.swiper-slide-page {
	min-height: 400px;
	padding-bottom: 40px;
}

.header {
	position: absolute;
	left: 0;
	top: 0;
	height: 100/75rem;
	background: white;
	width: 100%;
	z-index: 1000;
	text-align: center;
	border-bottom: 1px solid #ddd;
	.logo {
		width: 170/75rem;
		margin-top: 30/75rem;
	}
	.menu-button {
		position: absolute;
		top: 30/75rem; left: 25/75rem;
		cursor: pointer;
		-webkit-transition: .3s;
		transition: .3s;
		img {
			width: 35/75rem;
		}
	}
}

.main-wrapper {
	padding-top: 100/75rem;
}

.bg {
	width: 100%;
	height: 100%;
	background: url(../images/bg.jpg) no-repeat top center;
	background-size: 100%;
	background-color: #000;
	text-align: center;

	&.reg {
		.box {
			top: 1rem;
		}
		.b {
			margin-top: 30px;
			text-align: left;
			color: #d4d4d4;
			a {
				color: #3494a3;
			}
		}
	}

	&.fill {
		font-size: 14px;
		.title {
			margin-top: 20px;
			div {
				font-size: 24px;
			}
		}
		.address {
			text-align: left;
			select {
				display: inline-block;
				border-radius: 0;
				margin: 0;
				width: 32%;
				font-size: 16px;
				box-sizing: border-box;
				padding: 10px;
				border: 1px solid #f2f2f2;
				background: white;
			}
		}
		.bb {
			color: #2a9aa9;
			font-size: 16px;
		}
	}
	
	.box {
		position: absolute;
		left: 1rem;
		top: 3rem;
		width: 7rem;
		padding: 0.5rem;
		border-radius: 10px;
		background: #f8f8f8;
		
		.logo {
			margin-top: 20px;
			img {
				width: 175/75rem;
			}
		}

		.form {
			margin-top: 40px;
			input {
				display: inline-block;
				box-sizing: border-box;
				border: 1px solid #f2f2f2;
				width: 100%;
				font-size: 16px;
				padding: 10px;
				margin-bottom: 10px;
			}

			.inline{
				clear: both;

				input {
					width: 4rem;
					float: left;
				}

				img {
					height: 1.2rem;
					width: 2.4rem;
					margin-left: 0.5rem;
				}

				.btn {
					width: 2.4rem;
					height: 1.2rem;
					padding: 0;
					line-height: 1.2rem;
					font-size: 12px;
					border-radius: 0;
					margin-left: 0.5rem;
				}
			}
		}

		.btns {
			margin-top: 40px;
			.btn {
				display: block;
				width: 100%;
				font-size: 16px;
				margin-bottom: 20px;
				box-sizing: border-box;
			}
		}
	}
}

.index {
	background: url(../images/bg.jpg) no-repeat top center;
	background-size: 100%;
	background-color: #000;
	text-align: center;
	color: white;
	font-size: 18px;
		
	h1 {
		padding-top: 220/75rem;
		font-size: 28px;
	    font-weight: normal;
		margin-bottom: 40px;
	}

	.buttons {
		margin-top: 250/75rem;
		.c1 {
			margin-right: 20px;
		}
	}

	.down {
		position: absolute;
		left: 50%;
		width: 30px;
		bottom: 40px;
		margin-left: -15px;
	}
}

.page {
	background: #f0f3f5;
	text-align: center;

	.t {
		text-align: center;
		padding-top: 100/75rem;
		margin-bottom: 50/75rem;
		color: #2cbfc9;
		font-size: 16px;
	}

	.panel {
		&.ng-binding {
			img {
				max-width: 100%;
			}
		}

		background: #fff;
		border-radius: 5px;
		padding: 25/75rem;
		text-align: left;
		margin-bottom: 30/75rem;
		margin-left: 30/75rem;
		margin-right: 30/75rem;
		font-size: 16px;

		.l1 {
			.label {
				background: #00abba;
			    font-size: 12px;
			    color: white;
			    border-radius: 30px;
			    vertical-align: middle;
			    display: inline-block;
			    padding: 3px 8px;
			    margin-left: 5px;
			    margin-top: -3px;
			}
			.price {
				float: right;
				color: #f8883a;
			}
			margin-bottom: 20px;
		}
		.l2 {
			color: #a2a2a2;
			font-size: 14px;
			span {
				margin-right: 10px;
			}
			.time {
				color: #626262;
				float: right; 
				margin-right: 0;
			}
		}
		.h1 {
		    margin-top: 20px;
			text-align: center;
			margin-bottom: 30px;
		}
		p {
			margin: 0 30px 30px;
		}
	}

	.b {
		margin-top: 40px;
		.btn {
			width: 286/75rem;
			font-size: 12px;
		}
	}
}

.footer {
	color: #716e6f;
	padding: 0.5rem 1rem;
	background-color: #393735;
	font-size: 14px;
	.ewm {
		width: 3rem;
		display: inline-block;
		float: left;

		img {
			width: 80%;
			margin-top: 10px;
		}
	}
	.contact {
		color: #3494a3;
		padding-top: 25px;
		float: right;
		padding-left: 0.5rem;
		width: 4.5rem;
		display: inline-block;
	
		i {
			margin-right: 10px;
		}
		.l1 {
			margin-top: 10px;
			margin-bottom: 10px;
		}
	}
	.copyright {
		border-top: 1px solid #514a4b;
		margin-top: 10px;
		padding-top: 10px;
		text-align: center;
	}
}

.mybox {
	margin-top: 25/75rem;
	background: white;
	font-size: 16px;
	text-align: left;
	.maillist {
		padding: 0 25/75rem;
	}
	
	.mail {
		clear: both;
		padding: 25/75rem 0;
		border-bottom: 1px solid #ddd;
		width: 700/75rem;
		.img {
			float: left;
			width: 100/75rem;
			margin-right: 25/75rem;
			img {
				width: 100/75rem;
				height: 100/75rem;
				border-radius: 50%;
			}
		}
		.content {
			float: left;
			width: 575/75rem;
			.l1 {
				.time {
					color: #bdbdbd;
					float: right;
				}
				.new {
					margin-left: 5px;
				}
			}
			.l2 {
				margin-top: 5px;
				color: #ababab;
				font-size: 14px;
			}
		}
	}
}

.me {
	padding-top: 25/75rem;
	
	.panel {
		text-align: center;
		padding: 25/75rem;
	}

	.edit {
		text-align: right;
		a{
			font-size: 14px;
			color: #2cafb6;
		}
	}

	.logo {
		margin-top: 40px;
		img {
			border-radius: 50%;
			width: 160/75rem;
			height: 160/75rem;
		}
	}

	.username {
		margin-top: 15px;
	}

	.tags {
		margin-top: 15px;
		.tag {
			display: inline-block;
			background: #5abda6;
			color: white;
			padding: 0.1rem 0.6rem;
			font-size: 12px;
			border-radius: 20px;
			margin-bottom: 5px;
		}
	}

	.company {
		margin-top: 15px;
	}

	.ard {
		margin-top: 10px;
		padding-bottom: 15px;
		border-bottom: 1px solid #ddd;
	}
	
	.pt {
		margin-top: 15px;
		color: #2cafb6;
	}

	.owndesc {
		margin-top: 15px;
		text-align: left;
		margin-bottom: 15px;
	}
}

.form-box {
	.form-group{
		margin-bottom: 20px;
		.form-label {
			text-align: right;
			width: 150/75rem;
			float: left;
			padding: 10px 0;
			margin-right: 50/75rem;
		}
		.form-value {
			width: 435/75rem;
			float: left;
			img {
				width: 1rem;
				height: 1rem;
				border-radius: 50%;
			}
			input {
				padding: 10px;
				background: #f8f8f8;
				border: none;
				width: 100%;
				box-sizing: border-box;
				margin-bottom: 10px;
			}
			textarea {
				width: 100%;
				background: #f8f8f8;
				border: 0;
				padding: 10px;
				min-height: 100px;
				box-sizing: border-box;
			}
		}
	}
}

.me-edit {
	margin-top: 25/75rem;
	.panel {
		padding: 50px 0;
		text-align: center;
	}
	
	.tip {
		color: #a6a6a6;
	}
	.btn {
		margin: 0;
		width: 250px;
	}
}

.create-product {
	margin-top: 25/75rem;
	.panel {
		padding: 50px 0;
		text-align: center;
	}
	
	.tip {
		color: #a6a6a6;
	}
	.btn {
		margin: 0;
		width: 250px;
	}
}

.create-demand {
	margin-top: 25/75rem;
	.panel {
		padding: 50px 0;
		text-align: center;
	}
	
	.tip {
		color: #a6a6a6;
	}
	.btn {
		margin: 0;
		width: 250px;
	}
}

.detail {
	.panel {
		font-size: 14px;
	}
	.title {
		font-size: 16px;
		margin-bottom: 5px;
		.label {
			background: #00abba;
		    font-size: 12px;
		    color: white;
		    border-radius: 30px;
		    vertical-align: middle;
		    display: inline-block;
		    padding: 3px 8px;
		    margin-left: 5px;
		    margin-top: -3px;
		}
	}
	.rlists {
		margin-bottom: 20px;
		.ritem {
			margin-bottom: 5px;
			.key {
				color: #969696;
			}
			.value {
				.y {
					color: #d5b77c;
				}
				&.r {
					margin-right: 15px;
				}
			}
		}
	}
	.rb {
		color: #a4a4a4;
		margin-bottom: 20px;
		.ritem {
			margin-bottom: 5px;
		}
	}
	.tags {
		.tag {
			display: inline-block;
			background: #5abda6;
			color: white;
			padding: 0.1rem 0.6rem;
			font-size: 12px;
			border-radius: 20px;
			margin-bottom: 5px;
			margin-right: 10px;
		}
	}
	.applying {
		background: #1cb6a9;
		color: white;
		position: fixed;
		left: 0;
		width: 100%;
		padding: 15px 0;
		font-size: 16px;
		bottom: 0;
		text-align: center;
		a {
			color: white;
		}
		&.done {
			background: #d8d8d8;
			color: #b1b1b1;
		}
	}
	.text {
		padding-bottom: 30px;
		text-align: center;
		textarea {
			width: 100%;
			box-sizing: border-box;
			padding: 10px;
			height: 300px;
			background: #f8f8f8;
			border: none;
		}
		.btn {
			width: 300px;
			margin-top: 30px;
		}
	}
}

.scanapply {
	.user {
		.icon {
			margin-right: 15px;
			float: left;
			img {
				width: 125/75rem;
				height: 125/75rem;
				border-radius: 50%;
			}
		}
		.info {
			float: left;
			line-height: 1.5;
			.p {
				font-size: 12px;
				color: #a6a6a6;
			}
		}
	}
	.comment {
		margin-top: 10px;
		word-break: break-all;
		line-height: 1.5;
	}
}
